<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <title>搭配测试</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <script src="../js/mui.min.js"></script>
	    <script src="../js/jquery.3.2.1.js"></script>
	    <link href="../css/mui.min.css" rel="stylesheet"/>
	    <link href="../css/mui_common.css" rel="stylesheet"/>
	    <link href="../css/index/cxcs2.css" rel="stylesheet"/>
		<script type="text/javascript" charset="utf-8">
	      	mui.init();
	   </script>
	</head>
	<body id=wancheng>
		<header class="mui-bar mui-bar-nav fl">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">搭配测试</h1>
		    <div class="right">
		    	<div class="set">...</div>
		    	<div class="shop mui-icon" id="gouwuche">&#xe6b9;</div>
		    </div>
		</header>
		<div class="mui-content">
			<div class="banner">
				<div class="img">
					<img src="../img/index/cxcs2/banner.png" />
				</div>
				<div class="shadow">
					认识自己 是学穿搭的第一步
				</div>
				<div class="message">
					<h2>您的身材信息</h2>
					<div class="span">
						<span>年龄</span>
						<span>岁</span>
						<span>体重</span>
						<span>KG</span>
						<span>身高</span>
						<span>CM</span>
					</div>
					<div class="figure">
						<div class="figure_con">
							<img src="../img/index/cxcs2/messae1.png"/>
							<p>完美比例</p>
						</div>
						<div class="figure_con">
							<img src="../img/index/cxcs2/messae2.png"/>
							<p>完美比例</p>
						</div>
						<div class="figure_con">
							<img src="../img/index/cxcs2/messae3.png"/>
							<p>完美比例</p>
						</div>
						<div class="figure_con">
							<img src="../img/index/cxcs2/messae4.png"/>
							<p>完美比例</p>
						</div>
					</div>
					<div class="key_btn">
						<a class="again"  href="#bottomPopover">重新测试</a><a class="share">分享给闺蜜测测</a>
					</div>
				</div>
			</div>
			<div class="em"></div>
			<div class="tab">
				<div class="tab_nav clear">
					<a class="fl"><span>&#xe681;</span> 手册记录</a>
					<a class="fr">&#xe6d5;</a>
				</div>
				<div class="tab_con">
					<ul>
						<li>身体问题 逐个解答
							 <dl>
		                        <dd>国际合作</dd>
		                        <dd>合作办学</dd>
		                        <dd>学生交流</dd>
		                        <dd>成果转化</dd>
		                    </dl>
						</li>
						<li>搭配专家 深度解决</li>
						<li>专属搭配  为你甄选</li>
					</ul>
				</div>
			</div>
			<script>
				$(document).ready(function() {
			        $(".tab .tab_nav").click(function(){
			            $(this).next().slideToggle("1000");
			        });
			    });
			</script>
			<div class="body">
				<h2>身体问题 逐个解答</h2>
				<div class="perfect">
					完美身材更加需要完美衣品
				</div>
				<div class="body_con">
					<h3>体型修饰</h3>
					<div class="one">
						<h3>搭配建议</h3>
						<p>/代表明星：范冰冰、金 k卡戴珊/梨形穿衣重点是：凸显上半身，弱化下半身。修饰臀部和大腿。可以用肩部装饰较多的服装来凸显上半身，同时尽量避免穿一些紧身臀部的服饰。在色彩上采用上浅下深的方式来均衡视觉，把重点放到上半身。</p>
					</div>
					<div class="try">
						<div class="try_tit">
							<span>&#xe6a7;</span>您可以多尝试
						</div>
						<div class="try_con">
							<ul>
								<li>
									<img src="../img/index/cxcs2/img1.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img1.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img1.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img1.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img1.jpg">
									<span>H型风衣</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="cautious">
						<div class="cautious_tit">
							<span>&#xe6a6;</span>建议谨慎选择
						</div>
						<div class="cautious_con">
							<ul>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img2.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img2.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img2.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="body_con body_con1">
					<h3>脸颈修饰</h3>
					<div class="one">
						<h3>搭配建议</h3>
						<p>/代表明星：范冰冰、金 k卡戴珊/梨形穿衣重点是：凸显上半身，弱化下半身。修饰臀部和大腿。可以用肩部装饰较多的服装来凸显上半身，同时尽量避免穿一些紧身臀部的服饰。在色彩上采用上浅下深的方式来均衡视觉，把重点放到上半身。</p>
					</div>
					<div class="try">
						<div class="try_tit">
							<span>&#xe6a7;</span>您可以多尝试
						</div>
						<div class="try_con">
							<ul>
								<li>
									<img src="../img/index/cxcs2/img3.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img3.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img3.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img3.jpg">
									<span>H型风衣</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="body_con body_con2">
					<h3>衬托肤色</h3>
					<div class="one">
						<h3>搭配建议</h3>
						<p>/代表明星：范冰冰、金 k卡戴珊/梨形穿衣重点是：凸显上半身，弱化下半身。修饰臀部和大腿。可以用肩部装饰较多的服装来凸显上半身，同时尽量避免穿一些紧身臀部的服饰。在色彩上采用上浅下深的方式来均衡视觉，把重点放到上半身。</p>
					</div>
					<div class="try">
						<div class="try_tit">
							<span>&#xe6a7;</span>您可以多尝试
						</div>
						<div class="try_con">
							<ul>
								<li>
									<img src="../img/index/cxcs2/img4.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img5.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img6.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img7.jpg">
									<span>H型风衣</span>
								</li>
							</ul>
						</div>
					</div>
					<div class="cautious">
						<div class="cautious_tit">
							<span>&#xe6a6;</span>建议谨慎选择
						</div>
						<div class="cautious_con">
							<ul>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img1.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img2.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
								<li>
									<div class="li_l">
										<img src="../img/index/cxcs2/img3.jpg"/>
									</div>
									<div class="li_r">
										<h3>紧身裤</h3>
										<p>以搭配过臀的服装。或者选择高腰裙、喇叭裤等不显臀胯的下装</p>
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="body_con body_con3">
					<h3>下半身修饰方案</h3>
					<div class="one">
						<h3>搭配建议</h3>
						<p>/代表明星：范冰冰、金 k卡戴珊/梨形穿衣重点是：凸显上半身，弱化下半身。修饰臀部和大腿。可以用肩部装饰较多的服装来凸显上半身，同时尽量避免穿一些紧身臀部的服饰。在色彩上采用上浅下深的方式来均衡视觉，把重点放到上半身。</p>
					</div>
					<div class="try">
						<div class="try_tit">
							<span>&#xe6a7;</span>您可以多尝试
						</div>
						<div class="try_con">
							<ul>
								<li>
									<img src="../img/index/cxcs2/img4.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img5.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img6.jpg">
									<span>H型风衣</span>
								</li>
								<li>
									<img src="../img/index/cxcs2/img7.jpg">
									<span>H型风衣</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="expert">
				<h2>搭配专家，专属定制</h2>
				<h3>每天为你推荐最合适的搭配</h3>
			</div>
			<div class="beauty">
				<ul class="beauty_con" id="beauty">
					<li id="bea1">
						<div class="img">
							<img src="../img/index/home/beauty_one.png" alt="">
							<div class="shadow">&#xe649;<span>48</span></div>
						</div>
						<p>T恤搭配牛仔裤 舒适简约</p>
					</li>
					<li id="bea2">
						<div class="img">
							<img src="../img/index/home/beauty_two.png" alt="">
							<div class="shadow">&#xe649;<span>48</span></div>
						</div>
						<p>T恤搭配牛仔裤 舒适简约</p>
					</li>
					<li id="bea3">
						<div class="img">
							<img src="../img/index/home/beauty_three.png" alt="">
							<div class="shadow">&#xe649;<span>48</span></div>
						</div>
						<p>T恤搭配牛仔裤 舒适简约</p>
					</li>
					<li id="bea4">
						<div class="img">
							<img src="../img/index/home/beauty_four.png" alt="">
							<div class="shadow">&#xe649;<span>48</span></div>
						</div>
						<p>T恤搭配牛仔裤 舒适简约</p>
					</li>
				</ul>
			</div>
		</div>
		<div id="bottomPopover" class="mui-popover mui-popover-bottom">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<h2>重新测试？</h2>
					<p>重新测试会覆盖原有的身材数据哦！</p>
					<div class="btn">
						<button>取消</button>
						<button class="btn2">重新测试</button>
					</div>
				</div>
			</div>
		</div>
		<script>
			/*document.getElementById("gouwuche").addEventListener("tap",function(){
				mui.openWindow({
					url:"../list_shoppingCart.html",
					id:"gouwuche",
					createNew:true,
					show:{
						aniShow:"slide-in-right",
						duration:200
					},
					waiting:{
						title:"正在加载……"
					}
				});
			});*/
			
			document.getElementById("gouwuche").addEventListener("tap",function(){
				var main=mui.openWindow({
					url:"../index.html",
					id:"index"
					
				});
				mui.fire(main,'goGwc');
			});
		</script>
	</body>
</html>
